import {Button, Card, Col, Input, List, message, Modal, Row, Space, Table} from "antd";
import {invoke} from '@tauri-apps/api/core';
import {useEffect, useState} from "react";
import {useLocation} from 'react-router-dom';

const LargePage = (props = {}) => {
    const columns = [
        {
            title: '文件名称',
            dataIndex: 'path',
            key: 'path',
            ellipsis: true,
        },
        {
            title: '大小',
            dataIndex: 'size',
            key: 'size',
            width: 80,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'creatTime',
            width: 160,
        },
        {
            title: '操作',
            width: 65,
            key: 'op',
            align: 'center',
            search: false,
            render: (text, row) => {
                return <Space><a>删除</a></Space>
            }
        },
    ];
    const [listData, setListData] = useState([]);
    const [dirListData, setDirListData] = useState([]);
    const [ckPath, setCkPath] = useState([])
    const [fhVisible, setFhVisible] = useState(false)
    const [actionName, setActionName] = useState("")
    const [choseDir, setChoseDir] = useState("")
    const {state} = useLocation()
    useEffect(() => {
        getList(state.paths)
    }, []);
    const getList = (paths) => {
        if (paths) {
            invoke("find_large_file", {paths: paths}).then(data => {
                    console.log("larggggfile", data)
                    setListData(data)
                }
            );
        }
    }
    const listDir = (path) => {
        invoke("list_dir_by_path", {path}).then(data => {
            console.log("listdir>>res:", data)
            setDirListData(data)
        })
    }

    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log('selectedRows: ', selectedRows);
            setCkPath(selectedRowKeys)
        },
    };
    const copyFileTo = async () => {
        if (ckPath.length < 1) {
            message.error("请先选择文件")
            return
        }
        setFhVisible(true)
        setActionName("复制")
    }
    const del = () => {

    }
    const moveFileTo = () => {
        if (ckPath.length < 1) {
            message.error("请先选择文件")
            return
        }
        setFhVisible(true)
        setActionName("剪切")
    }
    const getListByDirName = (path) => {
        if (choseDir && path.indexOf(":") === -1) {
            setChoseDir(choseDir + "\\" + path)
        } else {
            setChoseDir(path);
        }
        listDir(path)
    }
    return (
        <div>
            <Modal
                title='选择文件夹'
                open={fhVisible}
                onCancel={(e) => setFhVisible(false)}
            >
                <Row>
                    <Col span={3}>
                        <List
                            dataSource={state.diskList}
                            renderItem={(item) =>
                                <Space
                                    direction="vertical"
                                    style={{display: 'flex'}}
                                    size={'large'}
                                >
                                    <Button onClick={e => getListByDirName(item.replace("\\", ""))}>
                                        {item.replace("\\", "")}盘</Button>
                                </Space>
                            }
                        >
                        </List>
                    </Col>
                    <Col span={21}>
                        <Card>
                            <Row><Col span={24}>
                                <Input size="large" value={choseDir}
                                       onPressEnter={(e) => getListByDirName(e.target.value)}
                                       onChange={(e) => setChoseDir(e.target.value)}/>
                            </Col></Row>
                            <Row><Col span={24}>
                                <Table
                                    size={"middle"}
                                    bordered={false}
                                    search={false}
                                    options={false}
                                    pagination={false}
                                    dataSource={dirListData}
                                    showHeader={false}
                                    rowKey={"path"}
                                    columns={[
                                        {
                                            key: 'path',
                                            dataIndex: 'path',
                                            title: '文件名称',
                                            ellipsis: true,
                                            render: (text, row) => {
                                                return <a onClick={() => getListByDirName(text)}>{text}</a>
                                            }
                                        },
                                    ]}
                                >
                                </Table>
                            </Col></Row>
                        </Card>
                    </Col>
                </Row>
            </Modal>
            <Row style={{marginBottom: "7px"}}>
                <Col span={2}>
                    <Button onClick={() => {
                        window.history.back();
                    }}>返回</Button>
                </Col>
                <Col span={14}>
                    {ckPath.length > 0 ? `已选中 ${ckPath.length} 个文件` : ""}
                </Col>
                <Col span={8} style={{textAlign: "right"}}>
                    <Space size={"large"}>
                        <Button type={"primary"} onClick={copyFileTo}>复制到</Button>
                        <Button type={"primary"} onClick={moveFileTo}>剪切到</Button>
                        <Button type={"primary"} onClick={del}>删除</Button>
                    </Space>
                </Col></Row>
            <Table
                size={"small"}
                // bordered={true}
                search={false}
                options={false}
                pagination={false}
                columns={columns}
                rowSelection={{
                    ...rowSelection,
                }}
                dataSource={listData}
                rowKey={"path"}
            >
            </Table>
        </div>
    )
}

export default LargePage